<template>
  <div class="tag-cloud">
    <div class="tag-cloud-header">
      <h3>标签云</h3>
      <el-input
        v-model="searchKeyword"
        placeholder="搜索标签..."
        clearable
        @input="handleSearch"
        style="width: 200px;"
        size="small"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    
    <div class="tag-cloud-content" v-loading="loading">
      <div v-if="displayTags.length === 0" class="no-tags">
        暂无标签数据
      </div>
      
      <div v-else class="tag-cloud-container">
        <span
          v-for="tag in displayTags"
          :key="tag.labelId"
          :style="getTagStyle(tag)"
          @click="handleTagClick(tag)"
          class="tag-cloud-item"
        >
          {{ tag.labelName }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { listLabel } from "@/api/note/noteLabel";

export default {
  name: "TagCloud",
  data() {
    return {
      allTags: [],
      displayTags: [],
      loading: false,
      searchKeyword: ""
    };
  },
  created() {
    this.loadTags();
  },
  methods: {
    // 加载标签数据
    async loadTags() {
      this.loading = true;
      try {
        const response = await listLabel({});
        this.allTags = response.rows || [];
        this.displayTags = this.allTags;
      } catch (error) {
        console.error("加载标签失败:", error);
      } finally {
        this.loading = false;
      }
    },
    
    // 处理搜索
    handleSearch() {
      if (!this.searchKeyword) {
        this.displayTags = this.allTags;
      } else {
        this.displayTags = this.allTags.filter(tag => 
          tag.labelName.toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      }
    },
    
    // 获取标签样式
    getTagStyle(tag) {
      // 生成随机字体大小和颜色
      const fontSize = Math.floor(Math.random() * 10) + 12; // 12px - 22px
      const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#00BFFF', '#32CD32', '#FFD700'];
      const color = tag.color || colors[Math.floor(Math.random() * colors.length)];
      
      return {
        fontSize: fontSize + 'px',
        color: color,
        cursor: 'pointer',
        margin: '5px',
        display: 'inline-block',
        padding: '2px 8px',
        borderRadius: '12px',
        backgroundColor: 'rgba(64, 158, 255, 0.1)',
        transition: 'all 0.3s'
      };
    },
    
    // 处理标签点击
    handleTagClick(tag) {
      this.$emit('tag-click', tag);
    },
    
    // 刷新标签云
    refresh() {
      this.loadTags();
    }
  }
};
</script>

<style scoped>
.tag-cloud {
  width: 100%;
}

.tag-cloud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.tag-cloud-content {
  min-height: 200px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.no-tags {
  text-align: center;
  color: #909399;
  padding: 50px 0;
}

.tag-cloud-container {
  text-align: center;
}

.tag-cloud-item:hover {
  transform: scale(1.1);
  font-weight: bold;
}
</style>